<template>
	<view>
		<!-- 这个插值文本在微信小程序中是可以随着setInterval变更的，在chrome中不可以，应该是兼容性问题 -->
		<span>插值文本: {{ msg }}</span>
	</view>
	<view>
		<span>插值文本2-基于ref: {{refmsg}}</span>
	</view>
	<view>
		<span>插值对象-基于ref:{{refobj}}</span>
		<span>插值对象.name-基于ref:{{refobj.name}}</span>
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	let msg = "msg0";
	let index = 0;
	const msglist = ["msg1", "msg2", "msg3"];
	// 文本插值不会随着js变量的变更而变更，也就是说只是首次渲染的时候绑定.
	setInterval(()=>{
		index++;
		msg = msglist[index%3]
		console.log(msg);
	}, 1000)
	
	// ------- 使用 ref 这种引用方式，可以使得dom能随时绑定js变量的变化.
	let refmsg = ref("msg0")
	let j = 0;
	setInterval(()=>{
		j++;
		refmsg.value = msglist[j%3]
		console.log(refmsg.value);
	}, 1000)
	
	// 一个对象的ref
	let refobj = ref({"name":"肖欢", "age":31})
</script>

<style>
	       
</style>
